<template>
    <div class="app-container">
        <el-form class="lookForm" :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="140px">
            <el-form-item label="岗位名称" prop="postName">
                <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设岗部门" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入设岗部门" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="负责人姓名" prop="fzrName">
                <el-input v-model="queryParams.fzrName" placeholder="请输入负责人姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <!-- <el-form-item label="指导老师姓名" prop="zdlsName">
                <el-input v-model="queryParams.zdlsName" placeholder="请输入指导老师姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->

            <el-form-item label="校区" prop="campusName">
                <el-input v-model="queryParams.campusName" placeholder="请输入校区" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="工作地点" prop="workAddr">
                <el-input v-model="queryParams.workAddr" placeholder="请输入工作地点" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button v-hasPermi="['workstudy:post:zzbExport']" icon="el-icon-download" size="mini"
                    @click="zzbExport">导出</el-button>
                <!-- <span style="color:red">*只有当前学年通过困难认定才能申请岗位</span> -->
            </el-form-item>
        </el-form>
        <hr />

        <div class="container">
            <el-empty v-if="isEmpty(tableData)" description="暂无岗位"></el-empty>
            <div class="item" v-else :span="8" v-for="(v, i) in tableData" :key="i">
                <el-card style="margin: 10px;" shadow="hover">
                    <div slot="header">
                        <span>{{ v.postName }}</span>
                        <el-button @click="lookVClick(v)" style="float: right; padding: 3px 0"
                            type="text">查看</el-button>
                    </div>
                    <div class="card-item">
                        校区:{{ v.campusName }}
                    </div>
                    <div class="card-item">
                        部门:{{ v.deptName }}
                    </div>
                    <!-- <div class="card-item">
                        指导老师:{{ v.zdlsName }}
                    </div> -->
                    <div class="card-item">
                        负责人:{{ v.fzrName }}
                    </div>
                    <div class="card-item">
                        工作地点:{{ v.workAddr }}
                    </div>
                    <div class="card-item">
                        岗位类型:{{ v.postType }}
                    </div>
                    <div class="card-item">
                        岗位职责:{{ v.workNeed }}
                    </div>
                    <div class="card-item">
                        技能要求:{{ v.skillNeed }}
                    </div>
                    <div class="card-item">
                        每周工作时长:{{ v.weekTime }} 小时
                    </div>
                    <div class="card-item">
                        招募/在岗学生:{{ v.postCount }}/{{ v.workStus }}
                    </div>
                    <div style="text-align: right;">
                        <el-button @click="toStuPost(v.id)" type="text">查看在岗学生</el-button>
                    </div>
                </el-card>
            </div>
        </div>


        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />



        <el-dialog title="岗位查看" :visible.sync="lookV" append-to-body fullscreen>
            <el-form class="lookForm" size="mini" ref="lookForm" label-width="148px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="岗位名称" prop="postName">
                            <el-input v-model="lookForm.postName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="设岗部门" prop="deptId">
                            <el-input v-model="lookForm.deptName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="设岗人数" prop="postCount">
                            <el-input v-model="lookForm.postCount" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="负责人" prop="fzrName">
                            <el-input v-model="lookForm.fzrName" readonly />
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="8">
                        <el-form-item label="指导老师" prop="zdlsName">
                            <el-input v-model="lookForm.zdlsName" readonly />
                        </el-form-item>
                    </el-col> -->

                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="zdlsPhone">
                            <el-input v-model="lookForm.zdlsPhone" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="付酬方式">
                            <el-input value="按小时" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="付酬标准">
                            <el-input value="15.00" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="预计金额(元/月/人)" prop="willMoney">
                            <el-input v-model="lookForm.willMoney" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="预计金额合计(元/月)" prop="willMoneyTotal">
                            <el-input readonly v-model="lookForm.willMoneyTotal" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="岗位职责" prop="workNeed">
                            <el-input type="textarea" v-model="lookForm.workNeed" readonly />
                        </el-form-item>
                    </el-col>


                    <el-col :span="24">
                        <el-form-item label="技能要求" prop="skillNeed">
                            <el-input type="textarea" v-model="lookForm.skillNeed" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="每周工作时长" prop="weekTime">
                            <el-input v-model="lookForm.weekTime" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="校区" prop="campusName">
                            <el-input v-model="lookForm.campusName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="工作地点" prop="workAddr">
                            <el-input v-model="lookForm.workAddr" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="岗位类型" prop="postType">
                            <el-input v-model="lookForm.postType" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="lookForm.remark" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div style="margin-left: 20px;">
                            <el-button size="mini" type="success" plain @click="lookV = false">关闭</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>


    </div>
</template>
<script>

import { listHall as listOwnApply } from "@/api/workstudy/post";

import { boolImg, isEmpty } from "@/api/helpFunc";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { checkRole } from '@/utils/permission'; // 权限判断函数

import TeacherSelect from '@/views/components/TeacherSelect/index';

import {
    getOwnInfo as getExtraInfo
} from "@/api/stuCQS/basedata/extraInfo";

import { getToken } from "@/utils/auth";



export default {
    name: "workstudy-apply",
    components: { Treeselect, TeacherSelect },
    dicts: ['qgzx_apply_status'],
    data() {
        return {
            boolImg,
            isEmpty,
            loading: false,
            total: 0,
            tableData: [],

            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postName: null,
            },

            lookV: false,
            lookForm: {},


            baseurl: process.env.VUE_APP_BASE_API + "/",


            applyForm: {
                idCard: "",
                bankCard: "",
                bankAddr: "",
                applySign: "",
                familyAddr: "",
                stuDorm: ""
            },


            upload: {
                headers: { Authorization: "Bearer " + getToken() },
                url: process.env.VUE_APP_BASE_API + "/common/upload",
                fileList: []
            },
            baseurl: process.env.VUE_APP_BASE_API + "/",
            applyFormStatus: false
        }

    },
    async created() {
        this.applyFormStatus = checkRole(['teststu'])

        this.getList();

    },
    methods: {
        toStuPost(id) {
            this.$store.qgzx_postId = id;
            this.$router.push("/workstudy/stupost/workstudy");
        },
        zzbExport() {
            this.download('workstudy/post/zzbExport', {
                ...this.queryParams
            }, `勤工助学岗位_${new Date().getTime()}.xlsx`)
        },

        handleAvatarSuccess(response, file, fileList) {
            this.applyForm.applySign = response.fileName;
            this.upload.fileList = [];
            this.$forceUpdate();
        },

        async getExtraInfo() {
            let res = await getExtraInfo();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    this.applyForm.familyAddr = res.data.xxlxdz;
                }
            }
        },

        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        async lookVClick(row) {
            this.lookV = true;
            this.lookForm = {};
            this.lookForm = { ...row };
            // this.getExtraInfo();
            // let bool = await this.getOwnInfo();
            // if (bool) {
            //     let loading = fullLoading(this);
            //     let res = await getOwnSign();
            //     loading.close();
            //     if (res.code == 200) {
            //         let data = { ...res.data };
            //         if (isEmpty(data.signature)) {
            //             this.$confirm('您的签名尚未上传', '提示', {
            //                 confirmButtonText: '点我前往',
            //                 cancelButtonText: '取消',
            //                 type: 'warning'
            //             }).then(() => {
            //                 this.$router.push("/user/profile")
            //             }).catch(() => {

            //             });
            //         } else {
            //             this.applyForm.postId = row.id;
            //             this.applyForm.applySign = data.signature;

            //         }
            //     }
            // }

        },

        async getList() {
            this.loading = true;
            let res = await listOwnApply(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.tableData = [...res.rows];
                this.total = res.total;
            }
        },

        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children,
            };
        }
    }
}


</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}

.card-item {
    border-bottom: 1px dotted lightblue;
    font-size: 13px;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
}

.item {}
</style>